<template>
  <div style="padding-top: 10px;">
    <el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="100px">
      <el-row gutter="15">
        <el-col :span="11">
          <el-form-item label="课程名称" prop="courseName">
            <el-input v-model="formData.courseName" type="text" placeholder="请输入课程名称" clearable
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="老师工号" prop="teacherId">
            <el-input v-model="formData.teacherId" type="text" placeholder="请输入老师工号" clearable
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row gutter="15">
        <el-col :span="7">
          <el-form-item label="授课地点" prop="build">
            <el-select v-model="formData.build" placeholder="请选择上课地点">
              <el-option v-for="(item, index) in course_place" :key="index" :label="item.label"
                :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="楼层" prop="floor">
            <el-input v-model="formData.floor" type="text" placeholder="例如：218，309" clearable
            :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row gutter="15">
        <el-col :span="11">
          <el-form-item label="上课时间">
            <el-button type="primary" icon="plus" size="default" @click="dialogVisible = true"> 新增上课时间 </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="上课周次" prop="week">
            <el-input v-model="formData.week" type="text" placeholder="例如：6-9" clearable
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row gutter="15" style="margin-bottom: 20px;">
        <el-col :span="20" :offset="2" >
            <el-tag v-for="(item,index) in formData.courseTime" :key="index" type="info" closable @close="handleClose(index)"
            v-if="true">周{{item.weekday}}/{{item.period}}/{{item.weekType}}周</el-tag>
        </el-col>
      </el-row>
      <el-row gutter="15">
        <el-col :span="22">
          <el-form-item label="授课学生" prop="studentList">
            <el-cascader v-model="formData.studentList" :options="studentListOptions"
              :props="studentListProps" :style="{width: '100%'}" placeholder="请选择授课学生" filterable
              clearable @focus="getStudentListOptions" :show-all-levels="false"></el-cascader>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item> 
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 弹出框 -->
    <el-dialog v-model="dialogVisible" @open="onOpen" @close="onClose" title="新增上课时间">
      <el-form ref="dialogFormref" :model="data.dialogData" :rules="data.dialogrules" size="default" label-width="100px">
        <el-row gutter="15">
          <el-col :span="11">
            <el-form-item label="授课节次" prop="period">
            <el-input v-model="data.dialogData.period" type="text" placeholder="请输入节次（例：1-2节）" clearable
              :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11"> 
            <el-form-item label="周次类型" prop="weekType">
            <el-radio-group v-model="data.dialogData.weekType" size="default">
              <el-radio v-for="(item, index) in weeTypeOptions" :key="index" :label="item.value"
                :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row gutter="15">
          <el-col :span="11"> 
          <el-form-item label="周几上课" prop="weekday">
            <el-select v-model="data.dialogData.weekday" placeholder="请选择周几" :style="{width: '100%'}">
              <el-option v-for="(item, index) in weekdayOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogClose">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { selectAllstudents,insertCourse } from '@/api/teacherCourse/addcrouse';
import { ref, reactive, toRaw, onMounted } from 'vue'
const { proxy } = getCurrentInstance()
const { course_place } = proxy.useDict("course_place")

import {
  ElMessage,
  ElIcon
}
from 'element-plus'
const formRef = ref()
const dialogFormref = ref()
const dialogVisible = ref(false)
const data = reactive({
  formData: {
    courseName: undefined,
    teacherId: undefined,
    studentList: [],
    courseTime:[],
    week: undefined,
    place: undefined,
    build:"文锦苑①",
    floor:""
  },
  dialogData:{
    period: undefined,
    weekType: undefined,
    weekday: undefined,
  },
  rules: {
    courseName: [{
      required: true,
      message: '请输入课程名称',
      trigger: 'blur'
    }],
    teacherId: [{
      required: true,
      message: '请输入老师工号',
      trigger: 'blur'
    }],
    studentList: [{
      required: true,
      type: 'array',
      message: '请至少选择一个学生',
      trigger: 'change'
    }],
    week: [{
      required: true,
      message: '例如：6-9',
      trigger: 'blur'
    }],
    build: [{
      required: true,
      message: '请选择楼号',
      trigger: 'blur'
    }],
    floor: [{
      required: true,
      message: '请输入楼层',
      trigger: 'blur'
    }]
  },
  dialogrules:{
    period: [{
      required: true,
      message: '请输入节次,例如“1-2节”',
      trigger: 'blur'
    }],
    weekType: [{
      required: true,
      message: '请输入周次',
      trigger: 'blur'
    }],
    weekday: [{
      required: true,
      message: '请选择周几',
      trigger: 'change'
    }]
  }
})
const {
  formData,
  rules
} = toRefs(data)
const rediolabel = ref([
  "文涛苑1","文涛苑2","文涛苑3","弘毅楼c"
])
const studentListOptions = ref()
const weeTypeOptions = ref([{
  "label": "单",
  "value": "单"
}, {
  "label": "双",
  "value": "双"
}, {
  "label": "不分单双周",
  "value": "不分单双"
}])
const weekdayOptions = ref([{
  "label": "周一",
  "value": "一"
}, {
  "label": "周二",
  "value": "二"
}, {
  "label": "周三",
  "value": "三"
}, {
  "label": "周四",
  "value": "四"
}, {
  "label": "周五",
  "value": "五"
}, {
  "label": "周六",
  "value": "六"
}, {
  "label": "周日",
  "value": "日"
}])
// props设置
const studentListProps = ref({
  "multiple": true
})


function getStudentListOptions() {
  if(!studentListOptions.value) {
    selectAllstudents().then(res => {
      console.log(res.data);
      studentListOptions.value = res.data
    })
  }
}

/**
 * @name: 表单提交
 * @description: 表单提交方法
 * @return {*}
 */
function submitForm() {
  data.formData.place = data.formData.build + data.formData.floor
  formRef.value.validate((valid) => {
    if (!valid||data.formData.courseTime.length==0) {
      ElMessage.error('填写有误')
      console.log(data.formData);
      return
    }
    //提交表单
    console.log(data.formData);
    insertCourse(data.formData).then(res => {
      console.log(res);
      ElMessage.success("提交成功")
    })
  })
}
/**
 * @name: 表单重置
 * @description: 表单重置方法
 * @return {*}
 */
function resetForm() {
  formRef.value.resetFields()
}

/**
 * 打开弹窗
 */
function onOpen() {
  
}
/**
 * 右上角叉叉关闭表单，清除数据
 */
function onClose() {
  dialogFormref.value.resetFields()
}

/**
 * 弹窗关闭
 */
function dialogClose() {
  dialogVisible.value = false
}

/**
 * 弹窗确认按钮
 */
function handelConfirm() {
  dialogFormref.value.validate((valid) => {
    if (!valid) return
    //提交表单
    console.log(data.dialogData);
    data.formData.courseTime.push(JSON.parse(JSON.stringify(data.dialogData)))
    console.log(data.formData.courseTime);

    dialogVisible.value = false
    dialogFormref.value.resetFields()

  })
}

/**
 * 标签关闭
 */
function handleClose(event) {
  console.log(event);
  data.formData.courseTime.splice(event,1)
}
</script>
<style>
</style>
